<style lang="scss" scoped>
.avatar {
    width: fit-content;
    display: flex;
    gap: 5px;
}
</style>

<template>
    <div class="avatar"
        :style="{ flexDirection: alignx === 'right' ? 'row-reverse' : 'row', textAlign: alignx === 'right' ? 'right' : 'left' }">
        <el-avatar :size="50" :src="avatarSrc" />
        <div class="text">
            <div class="name">{{ info?.name }}</div>
            <div class="time">{{ time }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import defaultAvatar from '@/assets/avatar.jpg'
import aiAvatar from '@/assets/ai-avatar.png'
import { computed } from 'vue';
import type { User } from '@/type';

interface AvatarProps {
    info?: User;
    time?: number;
    alignx?: 'left' | 'right' | '';
}

const props = defineProps<AvatarProps>();


const avatarSrc = computed(() => {
    if (props.info?.avatar) return props.info?.avatar;
    return props.info?.name === 'user' ? defaultAvatar : aiAvatar;
})
</script>
